<template>
  <a-modal :width="650" :title="title" v-model="visible" destroyOnClose :maskClosable="false" :confirmLoading="loading" @ok="onSubmit" @cancel="() => (visible = false)">
    <a-spin :delay="100" :spinning="loading">
      <a-form-model ref="sjhtform" :model="form" :rules="rules" :labelCol="lcol" :wrapperCol="wcol" @submit="onSubmit" @submit.native.prevent>
        <a-form-model-item label="权限名称" prop="name">
          <a-input v-model="form.name" allowClear :maxLength="64" placeholder="请输入权限名称（限64字）" />
        </a-form-model-item>
        <a-form-model-item label="权限key" prop="auth">
          <a-input v-model="form.auth" allowClear :maxLength="64" placeholder="请输入权限key（限64字）" />
        </a-form-model-item>
        <a-form-model-item label="接口地址" prop="api">
          <a-input v-model="form.api" allowClear :maxLength="512" placeholder="请输入接口地址（限500字）" />
        </a-form-model-item>
        <a-form-model-item label="权限指令" prop="directive">
          <a-input v-model="form.directive" allowClear :maxLength="256" placeholder="请输入权限指令（限256字）" />
        </a-form-model-item>
        <a-form-model-item label="备注" prop="remark">
          <a-textarea v-model="form.remark" allowClear :maxLength="512" placeholder="请输入备注（限500字）" :rows="2" />
        </a-form-model-item>

        <input type="submit" v-show="false">
      </a-form-model>
    </a-spin>
  </a-modal>
</template>
<script>
import { pick, mapValues, trim } from 'lodash'
import { form } from '@/utils/mixins'
import { SaveMenuAuth } from '@/api/manage/menu'
export default {
  name: 'SjhtMenuAuthForm', //编辑菜单操作权限表单
  mixins: [form],
  props: {
    menu: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      rules: {
        name: [{ required: true, whitespace: true, message: '请输入权限名称', trigger: 'blur' }],
        auth: [{ required: true, whitespace: true, message: '请输入权限key', trigger: 'blur' }],
        api: [{ required: true, whitespace: true, message: '请输入接口地址', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 打开新建窗口
    create() {
      this.visible = true
      if (this.loading) return
      this.reset()
      this.title = `添加【${this.menu.title}】的操作权限`
      this.form = {}
    },
    // 打开修改窗口
    update(data) {
      this.visible = true
      if (this.loading) return
      this.reset()
      this.title = `修改【${data.name}】操作权限`
      this.form = pick(data, ['id', 'name', 'auth', 'api', 'directive', 'remark'])
    },
    // 点击确定
    onSubmit(e) {
      e.preventDefault()
      this.$refs.sjhtform.validate(valid => {
        if (!valid) return false
        const who = this.$store.state?.user?.name
        const { form, menu, $message } = this
        if (form.id) {
          //修改
          if (menu.menuAuths.some(s => s.name == form.name && s.id != form.id)) {
            $message.error(`权限名称【${form.name}】已经存在`)
            return
          } else if (menu.menuAuths.some(s => s.auth == form.auth && s.id != form.id)) {
            $message.error(`权限key【${form.auth}】已经存在`)
            return
          }
        } else {
          //添加
          if (menu.menuAuths.some(s => s.name == form.name)) {
            $message.error(`权限名称【${form.name}】已经存在`)
            return
          } else if (menu.menuAuths.some(s => s.auth == form.auth)) {
            $message.error(`权限key【${form.auth}】已经存在`)
            return
          }
          Object.assign(form, { menuId: menu.id, who })
        }
        const fd = mapValues(form, v => (/[\S]+/.test(trim(v)) ? trim(v) : undefined))
        this.loading = true
        SaveMenuAuth(fd)
          .then(res => {
            $message.success('保存成功')
            this.$emit('success', res) //保存成功事件
            this.reset() //重置表单
            this.form = {}
            if (form.id) {
              //如果是修改就关闭对话框
              this.visible = false
            }
          })
          .catch(err => {
            $message.error(err)
          })
          .finally(() => {
            this.loading = false
          })
      })
    }
  }
}
</script>